<template>
  <div id="container" class="container">
    <div id="can" class="heatMap"></div>
  </div>
</template>

<script>
import Heatmap from "heatmap.js";
import * as THREE from "three";
import h337 from "heatmap.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
export default {
  data() {
    return {
      lastTime: 0,
      elapsedTime: null,
      clock: new THREE.Clock(),
    };
  },

  mounted() {
    this.init();
    this.createHeat();
    // this.createTag();
    // this.createHeatMap();
    this.animate();
  },

  methods: {
    createHeat() {
      var heatmap = h337.create({
        container: document.getElementById("can"),
        width: 512, //这里一定要2的n次方倍数,否则控制台报警告（定死，与后面坐标系计算强关联）
        height: 256, //这里一定要2的n次方倍数,否则控制台报警告（定死，与后面坐标系计算强关联）
        blur: ".8",
        radius: 10, //辐射圈范围大小e
        alpha: true,
        // opacity: 0.5,//透明度
        // minOpacity: 0.1,
        // maxOpacity: 0.9,
        //色带配置（比例）
    
        backgroundColor: "rgba(0,102,256,0)",
        //回调返回色带
        // onExtremaChange: function (res) {
        // console.log(res);
        // }
      });

      var points = [];

      var max = 0;

      var width = 600;

      var height = 400;

      var len = 200;

      while (len--) {
        var val = Math.floor(Math.random() * 100);

        max = Math.max(max, val);

        var point = {
          x: Math.floor(Math.random() * width),

          y: Math.floor(Math.random() * height),

          value: val,
        };

        points.push(point);
      }

      var data = {
        max: max,

        data: points,
      };

      heatmap.setData(data);

       const texture = new THREE.CanvasTexture(heatmap._renderer.canvas);

    //  const texture = new THREE.Texture(heatmap._renderer.canvas);
      var material = new THREE.MeshLambertMaterial({
        map: texture,
        transparent: true,
        opacity: 1,
      });

      var mesh = new THREE.Mesh(new THREE.BoxGeometry(20, 50, 50), material);
      this.scene.add(mesh);
    },
    init() {
      this.scene = new THREE.Scene();
      this.cssScene = new THREE.Scene();

      //初始化渲染器
      let container = document.getElementById("container");
      let height = container.offsetHeight;
      let width = container.offsetWidth;

      // 初始化相机
      this.camera = new THREE.PerspectiveCamera(
        50,
        width / height,
        0.01,
        10000
      );

      this.camera.position.set(47, 15, 29);
      this.camera.rotation.set(-Math.PI / 7, Math.PI / 4, Math.PI / 10);
      this.camera.lookAt(0, 0, 0);
      this.scene.add(this.camera);

      let hLight = new THREE.AmbientLight(0xffffff, 10);
      this.scene.add(hLight);

      // let light1 = new THREE.DirectionalLight(0xffffff, 10);
      // light1.position.set(50, 50, 50);
      // this.scene.add(light1);

      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      });
      this.renderer.setSize(width, height);
      container.appendChild(this.renderer.domElement);

      //初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

      this.controls.minDistance = 10;
      this.controls.maxDistance = 500;
      // // 上下旋转范围
      this.controls.minPolarAngle = 0; // radians
      this.controls.maxPolarAngle = Math.PI * 0.5; // radians
      // // 左右旋转范围

      window.addEventListener("resize", this.onWindowResize, false);
    },
    onWindowResize() {
      let container = document.getElementById("container");
      let height = container.offsetHeight;
      let width = container.offsetWidth;

      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(width, height);
    },
    createTag() {
      const geometry = new THREE.PlaneGeometry(5, 5, 10, 10); // 5x5 平面，10x10 细分
      const material = new THREE.MeshBasicMaterial({
        color: 0x00ff00,
        side: THREE.DoubleSide,
      }); // 绿色材质
      this.plane = new THREE.Mesh(geometry, material);
      this.scene.add(this.plane);
    },

    animate() {
      requestAnimationFrame(this.animate);

      const elapsedTime = this.clock.getElapsedTime();

      // 检查是否已经过了1秒
      if (elapsedTime - this.lastTime >= 0.15) {
        // this.mesh.material.map = this.createTextureFromHeatmap();
        // this.mesh.material.needsUpdate = true;
        this.renderer.render(this.scene, this.camera);
        // 更新 lastTime
        this.lastTime = elapsedTime;
      }
    },
    createHeatMap() {
      // 创建一个heatmap实例对象

      // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api

      const canvas = document.getElementById("can");

      // // 在 canvas 上绘制内容
      // context.fillStyle = 'rgba(255, 0, 0, 1)'; // 红色
      // context.fillRect(0, 0, 512, 512);
      // context.fillStyle = 'rgba(0, 0, 255, 1)'; // 蓝色
      // context.fillText('Hello, Three.js!', 50, 100);

      // // 创建 CanvasTexture
      // const texture = new THREE.CanvasTexture(canvas);

      var heatmapInstance = Heatmap.create({
        container: canvas,
      });

      var points = [];

      var max = 0;

      var width = 600;

      var height = 400;

      var len = 200;

      while (len--) {
        var val = Math.floor(Math.random() * 100);

        max = Math.max(max, val);

        var point = {
          x: Math.floor(Math.random() * width),

          y: Math.floor(Math.random() * height),

          value: val,
        };

        points.push(point);
      }

      var data = {
        max: max,

        data: points,
      };

      // 因为data是一组数据,web切图报价所以直接setData

      heatmapInstance.setData(data);

      //   const texture = new THREE.CanvasTexture(canvas);

      //   this.plan.material.needsUpdate = true;
      //   this.material.map = texture;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
.container {
  width: 100%;
  height: 100vh;
}
.heatMap {
  width: 600px;
  height: 400px;
  border: 1px solid;
  border-color: gray;
}
</style>
